<template>
  <div class="git-branch">
    <div class="git-branch-origin">
      <span>选择仓库</span>
      <el-select size="small" v-model="pid" placeholder="请选择仓库" @change="getBranchList">
        <el-option
          v-for="item in repos"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
    </div>
    <div class="git-branch-edit">
      <div class="git-branch-edit-header">
        <h4>普通分支</h4>
        <el-button type="primary" plain @click="createBranch" size="small">创建分支</el-button>
      </div>
      <div class="git-branch-edit-content">
        <el-input
          v-model="search"
          placeholder="按分支名筛选"
          suffix-icon="el-icon-search"
          size="small"
          @keyup.enter.native="getBranchList"
          clearable
          @clear="getBranchList"
        />
        <ul v-loading="listLoading">
          <li v-for="(item, index) in branches" :key="index">
            <i class="iconfont iconfenzhijiedian" />
            <span>{{ item.name }}</span>
            <i class="el-icon-delete" @click="deleteBranch(item.name)" />
          </li>
        </ul>
      </div>
    </div>
    <el-dialog
      title="新建分支"
      :visible.sync="addDialogVisible"
      width="30%"
      @open="getAllBranchAndTag"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item
          prop="branchName"
          label="分支名称"
          :rules="{
            required: true, message: '参数名不能为空', trigger: 'blur'
          }"
        >
          <el-input v-model="form.branchName" />
        </el-form-item>
        <el-form-item prop="from" label="创建自">
          <el-select v-model="form.createFrom" style="width: 100%;" placeholder="placeholder">
            <el-option-group label="分支">
              <el-option
                v-for="item in allBranchAndTag.branches"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-option-group>
            <el-option-group label="标签">
              <el-option
                v-for="item in allBranchAndTag.tags"
                :key="item.name"
                :label="item.name"
                :value="item.name"
              />
            </el-option-group>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="createBranch">创建分支</el-button>
          <el-button @click="addDialogVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getData, postData } from '@/api/requestData'
import { handleTimeDuration } from '@/utils/index'
export default {
  components: {},
  filters: {
    filterTime(time) {
      return handleTimeDuration(time)
    }
  },
  data() {
    return {
      pid: Number(this.$route.params.pid) || '',
      search: '',
      repoLoading: false,
      listLoading: false,
      allBranchAndTag: [],
      form: {
        'branchName': '',
        'createFrom': 'master'
      },
      addDialogVisible: false,
      repos: [],
      branches: []
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.repoLoading = true
      // 获取用户列表
      getData('git/list').then(response => {
        this.repoLoading = false
        this.repos = response.data.list
        if (!this.pid) {
          this.pid = this.repos[0].id
        }
        this.getBranchList()
        console.log('this.repos', this.repos)
      }).catch(() => {
        this.repoLoading = false
      })
    },
    createBranch() {
      this.addDialogVisible = true
      this.$refs['form'].validate((valid) => {
        if (valid) {
          postData('/git/create/branch/' + this.pid, this.form).then((response) => {
            this.getBranchList()
            this.$message.success('分支创建成功')
            this.addDialogVisible = false
          })
        }
      })
    },
    getBranchList() {
      this.listLoading = true
      getData(`/git/public/all/branches/${this.pid}`, {
        name: this.search
      }).then((response) => {
        this.branches = response.data
        this.listLoading = false
      }).catch(() => {
        this.listLoading = false
      })
    },
    deleteBranch(branchName) {
      const confirmMsg = `删除${branchName}分支后将无法恢复, 您确定?`
      this.$confirm(confirmMsg, '提示', {
        confirmButtonType: 'warning',
        cancelButtonType: 'text',
        type: 'error'
      }).then(() => {
        const url = `/git/delete/branch/${this.pid}/${branchName}`
        getData(url).then((res) => {
          this.$message.success('删除成功')
          this.getBranchList()
        }).catch(() => {})
      }).catch(() => {
        this.$message.info('取消删除')
      })
    },
    // deleteMergedBranch() {
    //   const confirmMsg = '删除已合并的分支后将无法恢复, 您确定?'
    //   this.$confirm(confirmMsg, '提示', {
    //     confirmButtonType: 'warning',
    //     cancelButtonType: 'text',
    //     type: 'error'
    //   }).then(() => {
    //     const url = '/git/delete/merged/branch/' + this.pid
    //     getData(url).then((response) => {
    //       this.$message.success(response.message)
    //     }).catch(() => {
    //     })
    //   }).catch(() => {
    //     this.$message.info('取消删除')
    //   })
    // },
    getAllBranchAndTag() {
      getData('/git/public/branch/tag/' + this.pid).then((response) => {
        this.allBranchAndTag = response.data
      }).catch(() => {})
    },
    saveProtectBranch() {
      // todo
    },
    // 弹窗内方法
    // editBranch(evt, type) {
    //   const node = evt.target.closest('.branch-name')
    //   type === 'input' ? node.classList.remove('editable') : (node.classList.add('editable'), node.querySelector('input').focus())
    // },
    // addBranch(index) {
    //   this.$prompt('请输入分支名', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消'
    //   }).then(({ value }) => {
    //     if (this.branches.includes(value)) {
    //       this.$message({
    //         type: 'error',
    //         message: `${value}分支已存在`
    //       })
    //     } else {
    //       typeof index === 'undefined' ? this.branches.push(value) : this.branches.splice(index, 0, value)
    //     }
    //   }).catch(() => {});
    // }
  }
}
</script>

<style lang="scss" scoped>
.git-branch {
  background-color: #FFFFFF;
  position: relative;
  padding: 20px;
  height: 100%;
  overflow: auto;
  &-origin {
    & > span {
      color: #333;
      font-size: 14px;
      margin-right: 8px;
    }
    /deep/.el-select {
      width: 170px;
      .el-input__inner {
        border-radius: 2px;
      }
    }
  }
  &-protect {
    &-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 10px 0;
    }
    &-content {
      height: 354px;
      background-color: #F8F8F8;
      display: flex;
      align-items: center;
      .commit-flow-content {
        display: flex;
        align-items: center;
        margin: auto;
        & > div {
          // margin: 0 12px;
          display: flex;
          align-items: center;
          height: 50px;
          position: relative;
          & + div {
            margin-left: 12px;
          }
          .branch-name {
            padding: 0 36px;
            cursor: pointer;
            position: relative;
            height: 100%;
            line-height: 50px;
            border: 1px solid #E1E1E1;
            border-radius: 4px;
            background-color: #fff;
            .el-input {
              max-width: 120px;
              display: none;
            }
            &.editable {
              .branch-name-static {
                display: none;
              }
              .el-input {
                display: block;
              }
            }
            div {
              // position: absolute;
              // width: 100%;
              // height: 100%;
            }
          }
          span {
            display: inline-block;
            width: 24px;
            text-align: center;
            line-height: 16px;
            &:last-of-type {
              text-align: right;
            }
            &:first-of-type {
              text-align: left;
            }
            i {
              cursor: pointer;
              font-size: 16px;
              display: none;
              &:hover {
                color: #409EFF;
              }
            }
          }
          &:hover span i{
            display: inline-block;
          }
          &:not(:last-child):after {
            content: '\E600';
            font-family: iconfont!important;
            font-size: 24px;
            color: #5A9AD4;
            margin-left: 8px;
          }
        }
      }
    }
  }
  &-edit {
    height: calc(100% - 66px);
    &-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 20px 0 10px;
    }
    &-content {
      height: calc(100% - 32px);
      .el-input {
        width: 240px;
        /deep/.el-input__inner {
          border-radius: 2px;
        }
      }
      ul {
        margin-top: 12px;
        height: calc(100% - 32px);
        overflow: auto;
        li {
          list-style: none;
          color: #666;
          height: 40px;
          display: flex;
          align-items: center;
          &:hover {
            background-color: #F0F0F0;
          }
          .iconfont {
            margin-right: 6px;
          }
          .el-icon-delete {
            margin-left: auto;
            margin-right: 6px;
            cursor: pointer;
            &:hover {
              color: #409EFF;
            }
          }
        }
      }
    }
  }
}
.mini-button {
  padding: 1px 2px;
}
.del-branch {
  color: red;
  border-color: red;
}
.branch-col {
  padding-top: 8px;
}
</style>
